{#if type === 'video'}
  <video
    class="media-fit"
    aria-label={description}
    src={url}
    {poster}
    controls
    width={intrinsicWidth}
    height={intrinsicHeight}
    ref:player
  />
  <MediaControlsFix />
{:elseif type === 'audio'}
  <div class="audio-player-container">
    <audio
      class="audio-player"
      aria-label={description}
      src={url}
      controls
      ref:player
    />
  </div>
  <MediaControlsFix />
{:elseif type === 'gifv'}
  <video
    class="media-fit"
    aria-label={description}
    src={url}
    {poster}
    autoplay
    muted
    loop
    webkit-playsinline
    playsinline
    width={intrinsicWidth}
    height={intrinsicHeight}
  />
{:else}
  <img
    class="media-fit"
    alt={description}
    title={description}
    src={url}
    width={intrinsicWidth}
    height={intrinsicHeight}
  />
{/if}
<style>
  .media-fit {
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  .audio-player-container {
    min-height: 50vh;
    min-width: 400px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--audio-bg);
  }
  .audio-player {
    padding: 30px 10px;
    margin: 10px;
  }
  @media (max-width: 767px) {
    .audio-player-container {
      min-height: 200px;
      min-width: calc(100vw - 40px);
      align-items: center;
    }
  }
</style>
<script>
  import { get } from '../../../_utils/lodash-lite.js'
  import MediaControlsFix from '../../MediaControlsFix.html'

  export default {
    computed: {
      type: ({ media }) => media.type,
      url: ({ media }) => media.url,
      description: ({ media }) => media.description || '',
      poster: ({ media }) => media.preview_url,
      static_url: ({ media }) => media.static_url,
      // intrinsic width/height to avoid layout shifting https://chromestatus.com/feature/5695266130755584
      // note pleroma does not give us intrinsic width/height
      intrinsicWidth: ({ media }) => get(media, ['meta', 'original', 'width']),
      intrinsicHeight: ({ media }) => get(media, ['meta', 'original', 'height'])
    },
    ondestroy () {
      const player = this.refs.player
      if (player && !player.paused) {
        player.pause()
      }
    },
    components: {
      MediaControlsFix
    }
  }
</script>
